<template>
	<view>
		<view>
			<view class="head">
				<text>零钱理财</text>
				<text>超500,000+人购买</text>
			</view>
			<view class="content">
				<text>收益稳健，轻松理财；申赎灵活，使用方便；严控风险，省心之选；精品热销，先到先得</text>
			</view>
			<view class="label">
				<image style="width: 27px;height: 27px;" src="@/static/dueondemand/icon.png"></image>
				<text>为您甄选</text>
				<text>活期精品</text>
			</view>
		</view>
		<template v-for="item in cardData">
			<view class="card" v-if="item.name != null">
				<navigator url="./demanddetail">
					<view>
						<view class="card-head">
							<text>{{item.name}}</text>
							<text>灵活申赎</text>
						</view>
						<view class="card-content">
							<view class="item1">
								<text>{{item.sevenDaysYearIncome}}</text>
								<text>七日年化收益率</text>
							</view>
							<view class="item2">
								<text>活期</text>
								<text>先到先得</text>
							</view>
							<view class="item3">
								<button type="default">立即购买</button>
							</view>
						</view>
					</view>
				</navigator>
				<view class="line">
					
				</view>
				<view class="card-foot">
					<text>本基金为货币市场基金，属于证券投资几斤重的高流动性、低风险品种</text>
				</view>
			</view>
		</template>
		<view class="foot">
			• 过往业绩不预示未来表现，市场有风险，投资需谨慎
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cardData:[]
			}
		},
		methods: {
			async getCurrentFundInfo(){
				const res = await this.$request({
					url:'/currentFundInfo/selectAll',
					data:{
						page:1,
						name:""
					}
				})
				console.log(res)
				this.cardData = res.data.list;
			}
		},
		onLoad(){
			this.getCurrentFundInfo();
		}
	}
</script>

<style lang="scss" scoped>
.head{
	width: 698rpx;
	margin: 30rpx auto;
	display: flex;
	justify-content: space-between;
	text:nth-child(1){
		font-size: 18px;
		font-weight: bold;
	}
	text:nth-child(2){
		font-size: 12px;
		color:#ccc;
		line-height: 25px;
	}
}
.content{
	width: 698rpx;
	margin: 0 auto;
	text{
		color: #a8a8a8;
		font-size: 29rpx;
	}
}
.label{
	width: 698rpx;
	height: 27px;
	margin: 20rpx auto;
	background-image: linear-gradient(to right,#fee7e7 0%,#feeded 50%,#fef4f4 100%);
	border-top-left-radius: 15pt;
	border-bottom-left-radius: 15pt;
	image{
		vertical-align: middle;
		margin-right: 10pt;
		margin-left: 1pt;
	}
	text{
		margin-right: 10pt;
		color: red;
		font-size: 12px;
		vertical-align: middle;
	}
}
.card{
	width: 698rpx;
	height: 163px;
	margin: 20rpx auto;
	box-shadow: 0 0 5px 2px #f5f5f5;
	overflow: hidden;
	.card-head{
		margin-top: 6pt;
		margin-left: 10pt;
		text:nth-child(1){
			font-size: 14px;
			color: #717171;
			margin-right: 10pt;
		}
		text:nth-child(2){
			display: inline-block;
			width: 36pt;
			height: 10pt;
			font-size: 10px;
			background-color: #fcf5ec;
			color: #ce9f58;
			text-align: center;
		}
	}
	.card-content{
		width: 638rpx;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
		.item1{
			text:nth-child(1){
				display: block;
				font-size: 16px;
				color: red;
				font-weight: bold;
			}
			text:nth-child(2){
				font-size: 12px;
				color: #bbb;
			}
		}
		.item2{
			text:nth-child(1){
				display: block;
				font-size: 15px;
				font-weight: bold;
			}
			text:nth-child(2){
				font-size: 12px;
				color: #bbb;
			}
		}
		.item3{
			button{
				margin: 0;
				padding: 0;
				outline: none;
				border: none;
				background-color: #3476f1;
				color: white;
				width: 88px;
				height: 30px;
				font-size: 14px;
				border-radius: 0;
				line-height: 30px;
			}
		}
	}
	.line{
		width: 638rpx;
		height: 1px;
		background-color: #f5f7f9;
		margin: 30rpx auto;
	}
	.card-foot{
		width: 638rpx;
		margin: 0 auto;
		text{
			font-size: 12px;
			color: #bbb;
		}
	}
}
.foot{
	width: 698rpx;
	margin: 0 auto;
	font-size: 12px;
	color: #bbb;
}
</style>
